<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>txt-novel-reading</title>
    <link rel="stylesheet" href="@./css/sidebar.css" />
    <script src="@./js/jquery.min.js"></script>
</head>
<body>
    <div id="bookList" class="book-list" >
        <% if(novelsList && novelsList.length) { %>
            <% novelsList.forEach(function(item,index){ %>
                <div class="book-item" data-index="<%= index %>">
                    <div class="name"><%= item.name %></div>
                    <div class="delete">删除</div>
                    <div class="data">
                        <div class="cur"><%= item.activeChapterTitle %></div>
                        <div class="all">共<%= item.chapterLength %>章</div>
                    </div>
                </div>
             <% }); %>
        <% } else { %>
            <div class="default">
                暂无书籍！
            </div>
        <% } %>
    </div>
    <div id="fixedAction" class="fixed-action">
        <div class="action-btn add">
            添加书籍
        </div>
    </div>
    <div id="loadingBox" class="loading-box">
        <div class="loading"></div>
        <div class="loading-text"></div>
    </div>
    <div id="deletePopup" class="delete-popup" >
        <div class="popup-main">
            <div class="popup-content">
                是否删除本书籍？
            </div>
            <div class="popup-button">
                <div class="btn cancel">取消</div>
                <div class="btn confirm">确定</div>
            </div>
        </div>
        
    </div>
</body>
<script>

    (function(){        


        let vscode = acquireVsCodeApi ? acquireVsCodeApi() : {};
        
        window.addEventListener('message', event => {
            const message = event.data; 
            switch (message.command) {
                //加载状态
                case 'loading':
                    let loadingBox = $("#loadingBox");
                    if(message.data){
                        loadingBox.find(".loading-text").text(message.data)
                    }
                    if(loadingBox.is(":hidden")){
                        loadingBox.show();
                    }else{
                        loadingBox.hide();
                    }
                    break;
            }
        });


        //新增书籍
        $("#fixedAction").on("click",'.add',function(){
            vscode.postMessage({
                command: "add",
                data: ""
            });
        })

        //删除书籍
        var editIndex;
        var deletePopup = $("#deletePopup");
        $("#bookList").on("click",".delete",function(e){
            editIndex = Number($(this).parents(".book-item").attr("data-index"));
            deletePopup.show();
            e.stopPropagation();
        })
        deletePopup.on("click",'.confirm',function(){
            deletePopup.hide();
            vscode.postMessage({
                command: "delete",
                data: editIndex
            });
        })
        deletePopup.on("click",'.cancel',function(){
             deletePopup.hide();
        })

        //打开详情
        $("#bookList").on("click",".book-item",function(e){
            var index = $(this).attr("data-index")
            vscode.postMessage({
                command: "detail",
                data: Number(index)
            });
            e.stopPropagation();
        })
    }())

</script>
</html>